<!DOCTYPE html>
<html lang="en">
  <head> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        
        <!-- fav icon -->
        <link rel="icon" href="../assets/images/fav-icon/fav-icon.png">
        
        <!-- bootstarp -->
        <link rel="stylesheet" href="../css/vendors/bootstrap.min.css">
        
        <!-- Fancybox -->
        <link rel="stylesheet" href="../css/vendors/jquery.fancybox.min.css">
        
        <!-- animate.css file -->
        <link rel="stylesheet" href="../css/vendors/animate.css">
        
        <!-- Swiper -->
        <link rel="stylesheet" href="../css/vendors/swiper.min.css">
        
        <!-- Splitting -->
        <link rel="stylesheet" href="../css/vendors/splitting.css">
        
        <!-- fontAwesome -->
        <link rel="stylesheet" href="../css/vendors/all.min.css">
        
        <!-- Font Family -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&amp;family=Nunito:wght@400;500;600;700;800;900&amp;display=swap">
        
        <!-- main-LTR-1 -->
        <link rel="stylesheet" href="../css/main-LTR-1.css">
    <title>Home-12</title>
  </head>
  <body class=" dark-theme  overlay-is-linear-gradient rounded-btns">
    <!--Start Page Header-->
    <header class="page-header menu-on-end " id="page-header">
      <!--start navbar-->
      <div class="container-fluid">
        <nav class="main-navbar " id="main-nav"><a class="navbar-brand " href="#"><img class="brand-logo light-logo img-fluid " src="../assets/images/logo/logo-light-wide.png" alt=""/><img class="brand-logo dark-logo img-fluid " src="../assets/images/logo/logo-dark-wide.png" alt=""/></a>
          <div class="menu-toggler-btn"><span></span><span></span><span></span></div>
          <div class=" navbar-menu-wraper  " id="navbar-menu-wraper">
            <ul class="navbar-nav  mobile-menu ">
              <li class="nav-item has-sub-menu"><a class="nav-link   active" href="#0"><i class="fas fa-home icon"></i>home<i class="fas fa-chevron-down down-Arrow-icon"> </i></a>
                <ul class="sub-menu ">
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-1_dark.html"><i class="fas fa-home icon"></i>home-1</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-2_dark.html"><i class="fas fa-home icon"></i>home-2</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-3_dark.html"><i class="fas fa-home icon"></i>home-3</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-4_dark.html"><i class="fas fa-home icon"></i>home-4</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-5_dark.html"><i class="fas fa-home icon"></i>home-5</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-6_dark.html"><i class="fas fa-home icon"></i>home-6</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-7_dark.html"><i class="fas fa-home icon"></i>home-7</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-8_dark.html"><i class="fas fa-home icon"></i>home-8</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-9_dark.html"><i class="fas fa-home icon"></i>home-9</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-10_dark.html"><i class="fas fa-home icon"></i>home-10</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-11_dark.html"><i class="fas fa-home icon"></i>home-11</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-12_dark.html"><i class="fas fa-home icon"></i>home-12</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-1-rtl_dark.html"><i class="fas fa-home icon"></i>home-1 RTL</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-2-rtl_dark.html"><i class="fas fa-home icon"></i>home-2 RTL</a></li>
                </ul>
              </li>
              <li class="nav-item"><a class="nav-link  " href="features_dark.html"><i class="fas fa-boxes icon"></i>services</a></li>
              <li class="nav-item"><a class="nav-link  " href="about-us_dark.html"><i class="fas fa-address-card icon"></i>about us</a></li>
              <li class="nav-item has-sub-menu"><a class="nav-link  " href="#0"><i class="fas fa-cogs icon"></i>portfolio<i class="fas fa-chevron-down down-Arrow-icon"> </i></a>
                <ul class="sub-menu ">
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="portfolio-rounded-with-gabs_dark.html"><i class="fas fa-cog icon"></i>portfolio rounded </a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="portfolio-squared-with-gabs_dark.html"><i class="fas fa-cog icon"></i>portfolio squared-1</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="portfolio-squared-no-gabs_dark.html"><i class="fas fa-cog icon"></i>portfolio squared-2</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="portfolio-slider_dark.html"><i class="fas fa-cog icon"></i>portfolio slider</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="portfolio-single_dark.html"><i class="fas fa-list icon"></i>portfolio single</a></li>
                </ul>
              </li>
              <li class="nav-item has-sub-menu"><a class="nav-link  " href="#0"><i class="fas fa-edit icon"></i>blog<i class="fas fa-chevron-down down-Arrow-icon"> </i></a>
                <ul class="sub-menu ">
                  <li class="nav-item sub-menu-item has-sub-menu"><a class="nav-link sub-menu-link " href="#0"><i class="fas fa-pencil-alt icon"></i>blog home<i class="fas fa-chevron-down down-Arrow-icon"></i></a>
                    <ul class="sub-menu">
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="blog-home-1-col_dark.html"><i class="fas fa-pencil-alt icon"></i>blog home 1</a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="blog-home-2-col_dark.html"><i class="fas fa-pencil-alt icon"></i>blog home 2  </a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="blog-home-3-col_dark.html"><i class="fas fa-pencil-alt icon"></i>blog home 3  </a></li>
                    </ul>
                  </li>
                  <li class="nav-item sub-menu-item has-sub-menu"><a class="nav-link sub-menu-link " href="#0"><i class="fas fa-pencil-alt icon"></i>single post<i class="fas fa-chevron-down down-Arrow-icon"></i></a>
                    <ul class="sub-menu">
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="post-single-featured-image_dark.html"><i class="fas fa-pencil-alt icon"></i>single post 1</a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="post-single-featured-slider_dark.html"><i class="fas fa-pencil-alt icon"></i>single post 2</a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="post-single-featured-video_dark.html"><i class="fas fa-pencil-alt icon"></i>single post 3</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="nav-item has-sub-menu"><a class="nav-link  " href="#0"><i class="fas fa-money-check icon"></i>pricing<i class="fas fa-chevron-down down-Arrow-icon"> </i></a>
                <ul class="sub-menu ">
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="pricing-1_dark.html"><i class="fas fa-money-check icon"></i>pricing page 1</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="pricing-2_dark.html"><i class="fas fa-money-check icon"></i>pricing page 2</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="pricing-3_dark.html"><i class="fas fa-money-check icon"></i>pricing page 3</a></li>
                </ul>
              </li>
              <li class="nav-item has-sub-menu"><a class="nav-link  " href="#0"><i class="fas fa-file-code icon"></i>pages<i class="fas fa-chevron-down down-Arrow-icon"> </i></a>
                <ul class="sub-menu ">
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="testimonials_dark.html"><i class="fas fa-comments icon"></i>testimonials</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="clients_dark.html"><i class="fas fa-users icon"></i>our clients</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="faq_dark.html"><i class="fas fa-question icon"></i>FAQ</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="contact-us_dark.html"><i class="fas fa-mobile-alt icon"></i>contact us</a></li>
                  <li class="nav-item sub-menu-item has-sub-menu"><a class="nav-link sub-menu-link " href="#0"><i class="fas fa-times icon"></i>404 pages<i class="fas fa-chevron-down down-Arrow-icon"></i></a>
                    <ul class="sub-menu">
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="404-1_dark.html"><i class="fas fa-times icon"></i>404-1</a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="404-2_dark.html"><i class="fas fa-times icon"></i>404-2</a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="404-3_dark.html"><i class="fas fa-times icon"></i>404-3</a></li>
                    </ul>
                  </li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="sign-in_dark.html"><i class="fas fa-sign-in-alt icon"></i>sign in</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="sign-up_dark.html"><i class="fas fa-user-plus icon"></i>sign up</a></li>
                </ul>
              </li>
              <li class="nav-item"><a class="nav-link  " href="contact-us_dark.html"><i class="fas fa-mobile-alt icon"></i>contact us</a></li>
            </ul>
          </div><a class="header-cta  ma-btn-primary " href="#0">Subscribe</a>
        </nav>
      </div>
      <!--End navbar-->
    </header>
    <!--End Page Header-->
    <!-- Start  Page hero-->
    <section class="page-hero d-flex align-items-center" id="page-hero">
      <div class="overlay-image-bg  parallax"></div>
      <div class="overlay-color"></div>
      <div class="container">
        <div class="row">
          <div class="col-12 col-lg-10   mx-auto">
            <!--Start of .hero-text-area-->
            <div class="hero-text-area text-center ">
              <h1 class="hero-title" data-splitting>
                boost  your business with 
                <span class="heading-brand-name"> yufa</span>
              </h1>
              <p class="hero-subtitle narrow-centerd-text" data-splitting>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed
                architecto dolorum inventore
                impedit ad porro nisi autem iste quidem minus. 
              </p>
              <div class="cta-links-area wow  fadeInUp " data-wow-delay="0.8s"><a class=" ma-btn-primary cta-link cta-link-primary" href="#0">start now</a><a class=" ma-btn-primary cta-link " href="#0">Contact us</a></div>
            </div>
          </div>
        </div>
        <!--End of .hero-text-area -->
      </div>
    </section>
    <!-- End  Page hero-->
    <!-- Start  Features Section-->
    <section class="features text-center mega-section section-bg-shade" id="features">
      <div class="container">
        <div class="section-heading center-heading">
          <h2 class="section-title wow" data-splitting="chars">awesome features</h2>
          <p class="section-subtitle wow fadeInUp" data-wow-delay=".5s">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, architecto cupiditate odio rerum est</p>
          <div class="line line-solid-main-color wow fadeIn" data-wow-delay="1s"></div>
        </div>
        <div class="row features-row">  
          <!--Start First feature box-->
          <div class="col-12 col-md-6  col-lg-3 mx-auto">
            <div class="feature-box  wow fadeInUp" data-wow-delay="0.2s">
              <div class="feat-icon"><i class="fas fa-pencil-ruler font-icon"></i></div>
              <div class="feat-content">
                <h3 class="feat-title">Creative Solutions</h3>
                <p class="feat-text">
                  Lorem ipsum dolor sit amet consecltetur adipisicing elit. Omnis tempore
                  perferendis
                  explicabo.
                </p>
              </div>
            </div>
          </div>
          <!-- End First feature box                    -->
          <!--Start Second feature box-->
          <div class="col-12 col-md-6  col-lg-3 mx-auto">
            <div class="feature-box  wow fadeInUp" data-wow-delay="0.4s">
              <div class="feat-icon"><i class="fas fa-calculator  font-icon"></i></div>
              <div class="feat-content">
                <h3 class="feat-title">Solid Development</h3>
                <p class="feat-text">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis tempore
                  perferendis
                  explicabo.
                  
                </p>
              </div>
            </div>
          </div>
          <!-- End Second feature box-->
          <!--Start Third feature box-->
          <div class="col-12 col-md-6  col-lg-3 mx-auto">
            <div class="feature-box  wow fadeInUp" data-wow-delay="0.6s">
              <div class="feat-icon"><i class="fas fa-layer-group  font-icon"></i></div>
              <div class="feat-content">
                <h3 class="feat-title">awesome Designs</h3>
                <p class="feat-text">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis tempore
                  perferendis
                  explicabo.
                </p>
              </div>
            </div>
          </div>
          <!-- End Third feature box-->
          <!--Start fourth feature box-->
          <div class="col-12 col-md-6  col-lg-3 mx-auto">
            <div class="feature-box  wow fadeInUp" data-wow-delay="0.8s">
              <div class="feat-icon"><i class="fas fa-headphones-alt  font-icon"></i></div>
              <div class="feat-content">
                <h3 class="feat-title">great support</h3>
                <p class="feat-text">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis tempore
                  perferendis
                  explicabo.
                </p>
              </div>
            </div>
          </div>
          <!-- End fourth feature box-->
        </div>
        <!--Start .see-more-area-->
        <div class=" see-more-area wow fadeInUp" data-wow-delay="0.8s"><a class=" ma-btn-primary " href="#0">see all features</a></div>
        <!--End Of .see-more-area    -->
      </div>
    </section>
    <!-- End  Features Section-->
    <!-- Start  about Section-->
    <section class="about " id="about">
      <div class="container-fluid px-0">
        <!-- Start Second about div-->
        <div class="content-block  wide-img-from-end-dir ">
          <div class="row  g-0 ">
            <div class="col-12 col-lg-6 d-flex align-items-center order-0   order-lg-2 about-col wow fadeIn" data-wow-delay="0.4s">
              <div class="wide-img-area show-video ">
                <div class="overlay overlay-color"></div><img src="../assets/images/about/about-photo-wide-1.jpg" alt="show case wide image">
              </div>
            </div>
            <div class="col-12 col-lg-6   d-flex align-items-center about-col order-2 order-lg-0 wow fadeInUp" data-wow-delay="0.4s">
              <div class="text-area "><span class="tag-line">our mision</span>
                <h3 class=" about-title ">developing your way to success</h3>
                <div class="info-items">
                  <div class="row  g-0 ">
                    <div class="col-12 ">
                      <ul class="menu-items">
                        <li class="info-item"><img class="info-img-icon" src="../assets/images/about/icon-1.png" alt="showcase image" draggable="false">
                          <div class="info-content">
                            <h5 class="info-title">Creating a Uniq Experience</h5>
                            <p class="info-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. A omnis inventore quod maxime officiis.</p>
                          </div>
                        </li>
                        <li class="info-item"><img class="info-img-icon" src="../assets/images/about/icon-2.png" alt="showcase image" draggable="false">
                          <div class="info-content">
                            <h5 class="info-title">Adding More Value</h5>
                            <p class="info-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, repellat. Corporis eveniet dolores eos architecto!</p>
                          </div>
                        </li>
                        <li class="info-item"><img class="info-img-icon" src="../assets/images/about/icon-3.png" alt="showcase image" draggable="false">
                          <div class="info-content"> 
                            <h5 class="info-title">Fulfill your dreams</h5>
                            <p class="info-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis, ratione repellat architecto consectetur. </p>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div><a class=" ma-btn-primary " href="#0">Learn more</a>
              </div>
            </div>
          </div>
        </div>
        <!--End Second about div-->
        <!-- Start Second about div-->
        <div class="content-block  wide-img-from-start-dir  ">
          <div class="row  g-0 ">
            <div class="col-12 col-lg-6 d-flex align-items-center   about-col wow fadeIn" data-wow-delay="0.4s">
              <div class="wide-img-area">
                <div class="overlay overlay-color"></div><img src="../assets/images/about/about-photo-wide-2.jpg" alt="show case wide image">
              </div>
            </div>
            <div class="col-12 col-lg-6   d-flex align-items-center about-col   wow fadeInUp" data-wow-delay="0.4s">
              <div class=" text-area "><span class="tag-line">our vision</span>
                <h3 class=" about-title ">we can making your dreams came true </h3>
                <p class="about-text ">
                  Lorem ipsum dolor, sit amet consectetur
                  adipisicing elit.
                  Distinctio,
                  aliquam est!
                  rerum inventore animi at iusto 
                </p>
                <p class="about-text ">
                  Lorem ipsum dolor, sit amet consectetur
                  adipisicing elit.
                  Distinctio,
                  aliquam est!
                  rerum inventore animi at iusto mollitia nemo reprehenderit dignissimos voluptate eos 
                  Repellendus tenetur officia excepturi dolorum totam sunt accusamus quia fugiat quasi
                  
                </p>
                <div class="about-stats stats-counter">
                  <div class="row  g-0 ">
                    <!--Info One-->
                    <div class="col-4 ">
                      <div class="stat-box  ">
                        <p class="stat-num "><span class="sign">+</span><span class="counter" data-from="10" data-to="750" data-speed="3000" data-refresh-interval="50"></span></p>
                        <h5 class="stat-desc">projects</h5>
                      </div>
                    </div>
                    <!--Info Two-->
                    <div class="col-4 ">
                      <div class="stat-box ">
                        <p class="stat-num "><span class="sign">+</span><span class="counter" data-from="25" data-to="900" data-speed="3000" data-refresh-interval="50"></span></p>
                        <h5 class="stat-desc">clients</h5>
                      </div>
                    </div>
                    <!--Info Three-->
                    <div class="col-4 ">
                      <div class="stat-box ">
                        <p class="stat-num "><span class="sign">+</span><span class="counter" data-from="0" data-to="980" data-speed="3000" data-refresh-interval="50"></span></p>
                        <h5 class="stat-desc">hours</h5>
                      </div>
                    </div>
                  </div>
                </div><a class=" ma-btn-primary " href="#0">Learn more</a>
              </div>
            </div>
          </div>
        </div>
        <!--End Second about div-->
      </div>
    </section>
    <!-- End  about Section-->
    <!-- Start  portfolio Section-->
    <section class="portfolio portfolio-rounded-with-gaps mega-section section-bg-shade  " id="portfolio">
      <div class="container">
        <div class="section-heading center-heading">
          <h2 class="section-title wow" data-splitting="chars">a portfolio of our work</h2>
          <p class="section-subtitle wow fadeInUp" data-wow-delay=".5s">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, architecto cupiditate odio rerum est</p>
          <div class="line line-solid-main-color wow fadeIn" data-wow-delay="1s"></div>
        </div>
        <div class="portfolio-wraper  wow fadeInUp" data-wow-delay="0s">
          <!--a menu of links to show the photos users needs   -->
          <ul class="portfolio-btn-list ">
            <li class="portfolio-btn active " data-filter="*">all</li>
            <li class="portfolio-btn        " data-filter=".programming">programming</li>
            <li class="portfolio-btn        " data-filter=".consulting">consulting</li>
            <li class="portfolio-btn        " data-filter=".mobile">mobile app</li>
            <li class="portfolio-btn        " data-filter=".blog">blog</li>
          </ul>
          <div class="portfolio-group ">
            <div class="row  g-0 ">
              <div class="col-12  col-sm-6  col-lg-4  portfolio-item programming">
                <div class="item"><a class="portfolio-img-link " href="../assets/images/portfolio/1.jpg" data-fancybox=".filter">
                    <div class="overlay overlay-color"></div><img class="portfolio-img  img-fluid " src="../assets/images/portfolio/thumbs/1.jpg" alt="portfolio item photo"><i class="fas fa-search icon"></i></a>
                  <div class="item-info "><span class="info-title">programming   </span>
                    <ul class="tags-list">
                      <li class="tag-item"> <a class="tag-link" href="#">c#</a></li>
                      <li class="tag-item"> <a class="tag-link" href="#">Java </a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="col-12  col-sm-6  col-lg-4  portfolio-item blog">
                <div class="item"><a class="portfolio-img-link " href="../assets/images/portfolio/2.jpg" data-fancybox=".filter">
                    <div class="overlay overlay-color"></div><img class="portfolio-img  img-fluid " src="../assets/images/portfolio/thumbs/2.jpg" alt="portfolio item photo"><i class="fas fa-search icon"></i></a>
                  <div class="item-info "><span class="info-title">blog   </span>
                    <ul class="tags-list">
                      <li class="tag-item"> <a class="tag-link" href="#">wordpress</a></li>
                      <li class="tag-item"> <a class="tag-link" href="#">bloger  </a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="col-12  col-sm-6  col-lg-4  portfolio-item programming">
                <div class="item"><a class="portfolio-img-link " href="../assets/images/portfolio/3.jpg" data-fancybox=".filter">
                    <div class="overlay overlay-color"></div><img class="portfolio-img  img-fluid " src="../assets/images/portfolio/thumbs/3.jpg" alt="portfolio item photo"><i class="fas fa-search icon"></i></a>
                  <div class="item-info "><span class="info-title">programming  </span>
                    <ul class="tags-list">
                      <li class="tag-item"> <a class="tag-link" href="#">c++</a></li>
                      <li class="tag-item"> <a class="tag-link" href="#">ruby  </a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="col-12  col-sm-6  col-lg-4  portfolio-item consulting">
                <div class="item"><a class="portfolio-img-link " href="../assets/images/portfolio/4.jpg" data-fancybox=".filter">
                    <div class="overlay overlay-color"></div><img class="portfolio-img  img-fluid " src="../assets/images/portfolio/thumbs/4.jpg" alt="portfolio item photo"><i class="fas fa-search icon"></i></a>
                  <div class="item-info "><span class="info-title">consulting</span>
                    <ul class="tags-list">
                      <li class="tag-item"> <a class="tag-link" href="#">law</a></li>
                      <li class="tag-item"> <a class="tag-link" href="#">finance</a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="col-12  col-sm-6  col-lg-4  portfolio-item blog">
                <div class="item"><a class="portfolio-img-link " href="../assets/images/portfolio/5.jpg" data-fancybox=".filter">
                    <div class="overlay overlay-color"></div><img class="portfolio-img  img-fluid " src="../assets/images/portfolio/thumbs/5.jpg" alt="portfolio item photo"><i class="fas fa-search icon"></i></a>
                  <div class="item-info "><span class="info-title">blog</span>
                    <ul class="tags-list">
                      <li class="tag-item"> <a class="tag-link" href="#">wordpress</a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="col-12  col-sm-6  col-lg-4  portfolio-item mobile">
                <div class="item"><a class="portfolio-img-link " href="../assets/images/portfolio/6.jpg" data-fancybox=".filter">
                    <div class="overlay overlay-color"></div><img class="portfolio-img  img-fluid " src="../assets/images/portfolio/thumbs/6.jpg" alt="portfolio item photo"><i class="fas fa-search icon"></i></a>
                  <div class="item-info "><span class="info-title">mobile</span>
                    <ul class="tags-list">
                      <li class="tag-item"> <a class="tag-link" href="#">samsung</a></li>
                      <li class="tag-item"> <a class="tag-link" href="#">oppo </a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Start .see-more-area-->
        <div class=" see-more-area   wow fadeInUp" data-wow-delay="0s"> <a class=" ma-btn-primary " href="#0">see our portfolio</a></div>
        <!--End .see-more-area-->
      </div>
    </section>
    <!-- End  portfolio Section-->
    <!-- Start  our-team Section-->
    <section class="our-team mega-section d-flex align-items-center" id="our-team">
      <div class="container">
        <div class="section-heading center-heading">
          <h2 class="section-title wow" data-splitting="chars">our team</h2>
          <p class="section-subtitle wow fadeInUp" data-wow-delay=".5s">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, architecto cupiditate odio rerum est</p>
          <div class="line line-solid-main-color wow fadeIn" data-wow-delay="1s"></div>
        </div>
        <div class="row">
          <!--first Team Member-->
          <div class="col-12 col-md-8  col-lg-4 mx-md-auto ">
            <div class="tm-member-card   wow   fadeInUp" data-wow-delay="0.2s">
              <div class="tm-image ">
                <div class="overlay overlay-color"> </div><img class="img-fluid " src="../assets/images/our-team/1.jpg" alt="Team Member 1">
                <div class="tm-desc">
                  <div class="sc-wraper dir-row sc-size-40">
                    <ul class="sc-list">
                      <li class="sc-item" title="Facebook"><a class="sc-link" href="#0"><i class="fab fa-facebook-f sc-icon"></i></a></li>
                      <li class="sc-item" title="youtube"><a class="sc-link" href="#0"><i class="fab fa-youtube sc-icon"></i></a></li>
                      <li class="sc-item" title="instagram"><a class="sc-link" href="#0"><i class="fab fa-instagram sc-icon"></i></a></li>
                      <li class="sc-item" title="X"><a class="sc-link" href="#0"><i class="fab fa-x-twitter sc-icon"></i></a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="tm-details">
                <h6 class="tm-name">ahmed Aly</h6><span class="tm-role">web developer</span>
              </div>
            </div>
          </div>
          <!--Second Team Member-->
          <div class="col-12 col-md-8  col-lg-4 mx-md-auto ">
            <div class="tm-member-card   wow   fadeInUp" data-wow-delay="0.4s">
              <div class="tm-image ">
                <div class="overlay overlay-color"> </div><img class="img-fluid " src="../assets/images/our-team/2.jpg" alt="Team Member 2">
                <div class="tm-desc">
                  <div class="sc-wraper dir-row sc-size-40">
                    <ul class="sc-list">
                      <li class="sc-item" title="Facebook"><a class="sc-link" href="#0"><i class="fab fa-facebook-f sc-icon"></i></a></li>
                      <li class="sc-item" title="youtube"><a class="sc-link" href="#0"><i class="fab fa-youtube sc-icon"></i></a></li>
                      <li class="sc-item" title="instagram"><a class="sc-link" href="#0"><i class="fab fa-instagram sc-icon"></i></a></li>
                      <li class="sc-item" title="X"><a class="sc-link" href="#0"><i class="fab fa-x-twitter sc-icon"></i></a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="tm-details">
                <h6 class="tm-name ">fairouz amin</h6><span class="tm-role">web designer</span>
              </div>
            </div>
          </div>
          <!--Third Team Member-->
          <div class="col-12 col-md-8  col-lg-4 mx-md-auto ">
            <div class="tm-member-card   wow   fadeInUp" data-wow-delay="0.6s">
              <div class="tm-image ">
                <div class="overlay overlay-color"> </div><img class="img-fluid " src="../assets/images/our-team/3.jpg" alt="Team Member 3">
                <div class="tm-desc">
                  <div class="sc-wraper dir-row sc-size-40">
                    <ul class="sc-list">
                      <li class="sc-item" title="Facebook"><a class="sc-link" href="#0"><i class="fab fa-facebook-f sc-icon"></i></a></li>
                      <li class="sc-item" title="youtube"><a class="sc-link" href="#0"><i class="fab fa-youtube sc-icon"></i></a></li>
                      <li class="sc-item" title="instagram"><a class="sc-link" href="#0"><i class="fab fa-instagram sc-icon"></i></a></li>
                      <li class="sc-item" title="X"><a class="sc-link" href="#0"><i class="fab fa-x-twitter sc-icon"></i></a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="tm-details">
                <h6 class="tm-name">Allan Smith</h6><span class="tm-role">graphic designer</span>
              </div>
            </div>
          </div>
        </div>
        <!--Start teamsee-more-area-->
        <div class="see-more-area   wow fadeInUp" data-wow-delay="0.8s"><a class=" ma-btn-primary" href="#0">see all team members </a></div>
      </div>
    </section>
    <!-- End  our-team Section-->
    <!-- Start  pricing Section--> 
    <section class="pricing-3 mega-section  section-bg-shade" id="pricing-1">
      <div class="container">
        <div class="section-heading center-heading">
          <h2 class="section-title wow" data-splitting="chars">pricing</h2>
          <p class="section-subtitle wow fadeInUp" data-wow-delay=".5s">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, architecto cupiditate odio rerum est</p>
          <div class="line line-solid-main-color wow fadeIn" data-wow-delay="1s"></div>
        </div>
        <div class="ma-tabs">
          <div class="switch wow fadeInUp " data-wow-delay=".2s">
            <ul class="switch-btns-list">
              <li class=" switch-btn switch-left   active" data-target=".monthly-plan">monthly</li>
              <li class=" switch-btn switch-right  " data-target=".yearly-plan">yearly</li>
            </ul>
          </div>
          <div class="tabs">
            <div class="tab-content monthly-plan  visibale-tab">
              <div class="row">
                <!--First Plan-->
                <div class="col-12 col-md-9 col-lg-4  mx-auto price-plan ">
                  <div class="plan wow fadeInUp " data-wow-delay=".2s">
                    <div class="plan-cost">
                      <div class="pricing-img icon"><img class="img-fluid" src="../assets/images/pricing/1.svg" alt="pricing iamge"></div>
                      <p class="plan-price"><sup class="plan-currency">$</sup>0</p>
                      <h4 class="plane-name">free plan</h4>
                    </div>
                    <div class="plan-details">
                      <ul class="plan-list">
                        <li class="plan-feat ">150 Lorem, ipsum dolor.</li>
                        <li class="plan-feat ">20 Lorem ipsum dolor sit .</li>
                        <li class="plan-feat ">Lorem ipsum dolor sit.</li>
                        <li class="plan-feat ">free Lorem ipsum dolor sit amet.</li>
                        <li class="plan-feat ">added Lorem ipsum dolor sit .</li>
                      </ul>
                    </div>
                    <div class="plan-cta"><a class=" ma-btn-primary " href="#0">order now</a></div>
                  </div>
                </div>
                <!--Second-plan-->
                <div class="col-12 col-md-9 col-lg-4  mx-auto price-plan ">
                  <div class="plan wow fadeInUp " data-wow-delay=".4s">
                    <div class="plan-cost">
                      <div class="pricing-img icon"><img class="img-fluid" src="../assets/images/pricing/2.svg" alt="pricing iamge"></div>
                      <div class="ribbon">Most Popular</div>
                      <p class="plan-price"><sup class="plan-currency">$</sup>60</p>
                      <h4 class="plane-name">business plan</h4>
                    </div>
                    <div class="plan-details">
                      <ul class="plan-list">
                        <li class="plan-feat ">150 Lorem, ipsum dolor.</li>
                        <li class="plan-feat ">20 Lorem ipsum dolor sit .</li>
                        <li class="plan-feat ">Lorem ipsum dolor sit.</li>
                        <li class="plan-feat ">free Lorem ipsum dolor sit amet.</li>
                        <li class="plan-feat ">added Lorem ipsum dolor sit .</li>
                      </ul>
                    </div>
                    <div class="plan-cta"><a class=" ma-btn-primary " href="#0">order now</a></div>
                  </div>
                </div>
                <!--Third-plan-->
                <div class="col-12 col-md-9 col-lg-4  mx-auto price-plan ">
                  <div class="plan wow fadeInUp " data-wow-delay=".6s">
                    <div class="plan-cost">
                      <div class="pricing-img icon"><img class="img-fluid" src="../assets/images/pricing/3.svg" alt="pricing iamge"></div>
                      <p class="plan-price"><sup class="plan-currency">$</sup>96</p>
                      <h4 class="plane-name">enterprise plan</h4>
                    </div>
                    <div class="plan-details">
                      <ul class="plan-list">
                        <li class="plan-feat ">150 Lorem, ipsum dolor.</li>
                        <li class="plan-feat ">20 Lorem ipsum dolor sit .</li>
                        <li class="plan-feat ">Lorem ipsum dolor sit.</li>
                        <li class="plan-feat ">free Lorem ipsum dolor sit amet.</li>
                        <li class="plan-feat ">added Lorem ipsum dolor sit .</li>
                      </ul>
                    </div>
                    <div class="plan-cta"><a class=" ma-btn-primary " href="#0">order now</a></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-content yearly-plan ">
              <div class="row">
                <!--First Plan-->
                <div class="col-12 col-md-9 col-lg-4  mx-auto price-plan ">
                  <div class="plan ">
                    <div class="plan-cost">
                      <div class="pricing-img icon"><img class="img-fluid" src="../assets/images/pricing/1.svg" alt="pricing iamge"></div>
                      <p class="plan-price"><sup class="plan-currency">$</sup>0</p>
                      <h4 class="plane-name">free plan</h4>
                    </div>
                    <div class="plan-details">
                      <ul class="plan-list">
                        <li class="plan-feat ">150 Lorem, ipsum dolor.</li>
                        <li class="plan-feat ">20 Lorem ipsum dolor sit .</li>
                        <li class="plan-feat ">Lorem ipsum dolor sit.</li>
                        <li class="plan-feat ">free Lorem ipsum dolor sit amet.</li>
                        <li class="plan-feat ">added Lorem ipsum dolor sit .</li>
                      </ul>
                    </div>
                    <div class="plan-cta"><a class=" ma-btn-primary " href="#0">order now</a></div>
                  </div>
                </div>
                <!--Second-plan-->
                <div class="col-12 col-md-9 col-lg-4  mx-auto price-plan ">
                  <div class="plan ">
                    <div class="plan-cost">
                      <div class="pricing-img icon"><img class="img-fluid" src="../assets/images/pricing/2.svg" alt="pricing iamge"></div>
                      <div class="ribbon">Most Popular</div>
                      <p class="plan-price"><sup class="plan-currency">$</sup>560</p>
                      <h4 class="plane-name">business plan</h4>
                    </div>
                    <div class="plan-details">
                      <ul class="plan-list">
                        <li class="plan-feat ">150 Lorem, ipsum dolor.</li>
                        <li class="plan-feat ">20 Lorem ipsum dolor sit .</li>
                        <li class="plan-feat ">Lorem ipsum dolor sit.</li>
                        <li class="plan-feat ">free Lorem ipsum dolor sit amet.</li>
                        <li class="plan-feat ">added Lorem ipsum dolor sit .</li>
                      </ul>
                    </div>
                    <div class="plan-cta"><a class=" ma-btn-primary " href="#0">order now</a></div>
                  </div>
                </div>
                <!--Third-plan-->
                <div class="col-12 col-md-9 col-lg-4  mx-auto price-plan ">
                  <div class="plan ">
                    <div class="plan-cost">
                      <div class="pricing-img icon"><img class="img-fluid" src="../assets/images/pricing/3.svg" alt="pricing iamge"></div>
                      <p class="plan-price"><sup class="plan-currency">$</sup>1000</p>
                      <h4 class="plane-name">enterprise plan</h4>
                    </div>
                    <div class="plan-details">
                      <ul class="plan-list">
                        <li class="plan-feat ">150 Lorem, ipsum dolor.</li>
                        <li class="plan-feat ">20 Lorem ipsum dolor sit .</li>
                        <li class="plan-feat ">Lorem ipsum dolor sit.</li>
                        <li class="plan-feat ">free Lorem ipsum dolor sit amet.</li>
                        <li class="plan-feat ">added Lorem ipsum dolor sit .</li>
                      </ul>
                    </div>
                    <div class="plan-cta"><a class=" ma-btn-primary " href="#0">order now</a></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End  pricing Section-->
    <!-- Start  our-clients Section-->
    <section class="our-clients   elf-section" id="our-clients">
      <div class="container">
        <div class="section-heading d-none ">
          <h4 class="section-title ">our great clients</h4>
          <p class="section-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, architecto cupiditate odio rerum est</p>
          <div class="line-gradient-color">       </div>
        </div>
        <div class=" clients-logos d-flex align-items-center justify-content-around flex-wrap">
          <!--Swiper-->
          <div class="swiper-container">
            <div class="swiper-wrapper clients-logo-wraper">
              <!-- every client logo is located inside div  with clss name "swiper-slide ".
              if you want to add more logos please keep the strcture of the swiper-slide as showen below
              
              
              -->
              <div class="swiper-slide">
                <div class="client-logo  wow fadeInUp" data-wow-delay="0.2s"><a href="#0"><img class="img-fluid logo " src="../assets/images/clients-logos/1-white.png" alt=" "></a></div>
              </div>
              <div class="swiper-slide">
                <div class="client-logo wow fadeInUp" data-wow-delay="0.4s"><a href="#0"><img class="img-fluid logo " src="../assets/images/clients-logos/2-white.png" alt=" "></a></div>
              </div>
              <div class="swiper-slide">
                <div class="client-logo wow fadeInUp" data-wow-delay="0.6s"><a href="#0"><img class="img-fluid logo " src="../assets/images/clients-logos/3-white.png" alt=" "></a></div>
              </div>
              <div class="swiper-slide">
                <div class="client-logo wow fadeInUp" data-wow-delay="0.8s"><a href="#0"><img class="img-fluid logo " src="../assets/images/clients-logos/4-white.png" alt=" "></a></div>
              </div>
              <div class="swiper-slide">
                <div class="client-logo wow fadeInUp" data-wow-delay="1s"><a href="#0"><img class="img-fluid logo " src="../assets/images/clients-logos/5-white.png" alt=" "></a></div>
              </div>
              <div class="swiper-slide">
                <div class="client-logo wow fadeInUp" data-wow-delay="1.2s"><a href="#0"><img class="img-fluid logo " src="../assets/images/clients-logos/6-white.png" alt=" "></a></div>
              </div>
              <div class="swiper-slide">
                <div class="client-logo wow fadeInUp" data-wow-delay="1.4s"><a href="#0"><img class="img-fluid logo " src="../assets/images/clients-logos/7-white.png" alt=" "></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End  our-clients Section-->
    <!-- Start  testimonials Section-->
    <section class="testimonials testimonials-3-col mhmd  mega-section  " id="testimonials-3-col">
      <div class="container">
        <div class="section-heading center-heading">
          <h2 class="section-title wow" data-splitting="chars">testimonials</h2>
          <p class="section-subtitle wow fadeInUp" data-wow-delay=".5s">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, architecto cupiditate odio rerum est</p>
          <div class="line line-solid-main-color wow fadeIn" data-wow-delay="1s"></div>
        </div>
        <div class="swiper-container  wow fadeInUp  " data-wow-delay="0.4s">
          <div class="swiper-wrapper">
            <!--First Slide-->
            <div class="swiper-slide">
              <div class="testimonial-content">
                <div class="customer-testimonial"><i class="fas fa-quote-left   icon"></i>
                  <div class="content">
                    <p class="testimonial-text ">
                      ipsum
                      dolor sit amet consectetur adipisicing elit. Quod, id sequi aut qui est
                      ab,
                      corporis quis maiores reiciendis explicabo odio tenetur nulla sint vel.
                    </p>
                  </div>
                </div>
                <div class="customer-info "><img class="img-fluid " src="../assets/images/testimonials/1.jpg" alt="First Slide ">
                  <div class="customer-details">
                    <p class="customer-name">mhmd Amin</p>
                    <p class="customer-role">manager</p>
                  </div>
                </div>
              </div>
            </div>
            <!--Second Slide-->
            <div class="swiper-slide">
              <div class="testimonial-content">
                <div class="customer-testimonial"><i class="fas fa-quote-left    icon "></i>
                  <div class="content">
                    <p class="testimonial-text ">
                      ipsum
                      dolor sit amet consectetur adipisicing elit. Quod, id sequi aut qui est
                      ab,
                      corporis quis maiores reiciendis explicabo odio tenetur nulla sint vel.
                    </p>
                  </div>
                </div>
                <div class="customer-info "><img class="img-fluid " src="../assets/images/testimonials/2.jpg" alt="First Slide ">
                  <div class="customer-details">
                    <p class="customer-name">yusuf Amin</p>
                    <p class="customer-role">manager</p>
                  </div>
                </div>
              </div>
            </div>
            <!--Third Slide-->
            <div class="swiper-slide">
              <div class="testimonial-content">
                <div class="customer-testimonial"><i class="fas fa-quote-left   icon"></i>
                  <div class="content">
                    <p class="testimonial-text ">
                      ipsum
                      dolor sit amet consectetur adipisicing elit. Quod, id sequi aut qui est
                      ab,
                      corporis quis maiores reiciendis explicabo odio tenetur nulla sint vel.
                    </p>
                  </div>
                </div>
                <div class="customer-info "><img class="img-fluid " src="../assets/images/testimonials/3.jpg" alt="First Slide ">
                  <div class="customer-details">
                    <p class="customer-name">mostafa Amin</p>
                    <p class="customer-role">manager</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--navigation buttons-->
          <div class="swiper-button-prev">
            <div class="left-arrow"><i class="fas fa-arrow-left icon "></i>
            </div>
          </div>
          <div class="swiper-button-next">
            <div class="right-arrow"><i class="fas fa-arrow-right icon "></i>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End  testimonials Section-->
    <!-- Start  blog Section-->
    <section class="blog blog-home mega-section section-bg-shade" id="blog">
      <div class="container ">
        <div class="section-heading center-heading">
          <h2 class="section-title wow" data-splitting="chars">latest news</h2>
          <p class="section-subtitle wow fadeInUp" data-wow-delay=".5s">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, architecto cupiditate odio rerum est</p>
          <div class="line line-solid-main-color wow fadeIn" data-wow-delay="1s"></div>
        </div>
        <div class="row ">
          <div class="col-12 "> 
            <div class="posts-grid ">
              <div class="row">
                <div class="col-12 col-lg-4 ">
                  <div class="post-box wow fadeInUp" data-wow-delay=".4s"><a class="post-link" href="post-single-featured-image_dark.html">
                      <div class="post-img-wraper">
                        <div class="overlay-color"></div><i class="fas fa-search icon ">           </i><img class="post-img" src="../assets/images/blog/post-images/1.jpg" alt="">
                      </div></a>
                    <div class="post-summary">
                      <div class="post-info"><a class="post-cat" href="#"> <i class=" fas fa-list-alt icon"></i>cloud</a><span class="post-date"> <i class=" fas fa-history icon"></i>23/2/2023</span><a class="post-author" href="#"> <i class=" fas fa-user icon"></i>Allan Moore </a></div>
                      <div class="post-text"><a class="post-link" href="post-single-featured-image_dark.html"> 
                          <h2 class="post-title">asking big questions on your mind?</h2></a>
                        <p class="post-excerpt">
                          Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                          Iure nulla dolorem, voluptates molestiae
                          
                          
                        </p><a class="read-more" href="post-single-featured-image_dark.html">read more<i class="fas fa-arrow-right icon "></i></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-lg-4 ">         
                  <div class="post-box wow fadeInUp" data-wow-delay=".6s"><a class="post-link" href="post-single-featured-image_dark.html">
                      <div class="post-img-wraper">
                        <div class="overlay-color"></div><i class="fas fa-search icon ">         </i><img class="post-img" src="../assets/images/blog/post-images/2.jpg" alt="">
                      </div></a>
                    <div class="post-summary">
                      <div class="post-info"><a class="post-cat" href="#"> <i class=" fas fa-list-alt icon"></i>design</a><span class="post-date"> <i class=" fas fa-history icon"></i>23/2/2023</span><a class="post-author" href="#"><i class=" fas fa-user icon"></i>mhmd amin</a></div>
                      <div class="post-text"><a class="post-link" href="post-single-featured-image_dark.html">
                          <h2 class="post-title">world want a new kind of super heros</h2></a>
                        <p class="post-excerpt">
                          Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                          Iure nulla dolorem, voluptates molestiae 
                          
                          
                        </p><a class="read-more" href="post-single-featured-image_dark.html">read more<i class="fas fa-arrow-right icon "></i></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-lg-4 ">         
                  <div class="post-box wow fadeInUp" data-wow-delay=".8s"><a class="post-link" href="post-single-featured-image_dark.html">
                      <div class="post-img-wraper">
                        <div class="overlay-color"></div><i class="fas fa-search icon ">         </i><img class="post-img" src="../assets/images/blog/post-images/3.jpg" alt="">
                      </div></a>
                    <div class="post-summary">
                      <div class="post-info"><a class="post-cat" href="#"> <i class=" fas fa-list-alt icon"></i>life style</a><span class="post-date"> <i class=" fas fa-history icon"></i>23/3/2023</span><a class="post-author" href="#"><i class=" fas fa-user icon"></i>yusuf amin</a></div>
                      <div class="post-text"><a class="post-link" href="post-single-featured-image_dark.html">
                          <h2 class="post-title">helping others can boost you happiness</h2></a>
                        <p class="post-excerpt">
                          Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                          Iure nulla dolorem, voluptates molestiae.
                          
                          
                        </p><a class="read-more" href="post-single-featured-image_dark.html">read more<i class="fas fa-arrow-right icon "></i></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End  blog Section-->
    <!-- Start  take-action Section-->
    <section class="take-action mega-section " id="take-action">
      <div class="cta-wrapper">
        <div class="container">
          <div class="section-heading">
            <h2 class="section-title wow " data-splitting>subscribe to our newsletter</h2>
          </div>
          <div class="row  d-flex align-items-center wow fadeInUp  " data-wow-delay="0.4s">
            <div class="col-12 col-lg-8 mx-auto">
              <form class="email-capture-form">
                <input class="captured-email " id="captured-email" type="email" placeholder="Enter Your Email" required>
                <button class="  subscripe-btn " type="submit">Subscribe</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End  take-action Section-->
    <!-- Start  page-footer Section-->
    <footer class="page-footer dark-color-footer" id="page-footer">
      <div class="container">
        <div class="row footer-cols">
          <div class="col-12 col-md-8 col-lg-4  footer-col wow fadeInUp " data-wow-delay="0.3s">
            <h6 class=" footer-col-title  ">About yufa</h6>
            <div class="footer-col-content-wrapper">        
              <p class="footer-text-about-us ">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.Voluptatibus facere modi possimus dignissimos, 
                aliquam nobis eaque? Voluptatem magnam quisquam rem.
              </p>
              <div class="social-icons">
                <div class="sc-wraper dir-row sc-size-32">
                  <ul class="sc-list">
                    <li class="sc-item" title="Facebook"><a class="sc-link" href="#0"><i class="fab fa-facebook-f sc-icon"></i></a></li>
                    <li class="sc-item" title="youtube"><a class="sc-link" href="#0"><i class="fab fa-youtube sc-icon"></i></a></li>
                    <li class="sc-item" title="instagram"><a class="sc-link" href="#0"><i class="fab fa-instagram sc-icon"></i></a></li>
                    <li class="sc-item" title="X"><a class="sc-link" href="#0"><i class="fab fa-x-twitter sc-icon"></i></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-2  footer-col wow fadeInUp " data-wow-delay="0.5s">
            <h6 class=" footer-col-title    ">useful links</h6>
            <div class="footer-col-content-wrapper">
              <ul class="footer-menu ">
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">Google</a></li>
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">Dribbble</a></li>
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">linkedIn</a></li>
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">Wikipiddia</a></li>
              </ul>
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-2 footer-col wow fadeInUp " data-wow-delay=".7s">
            <h6 class=" footer-col-title    ">Resources</h6>
            <div class="footer-col-content-wrapper">
              <ul class="footer-menu">
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">support</a></li>
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">dashboard</a></li>
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">drivers</a></li>
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">projects</a></li>
              </ul>
            </div>
          </div>
          <div class="col-12 col-md-8   col-lg-4 footer-col wow fadeInUp " data-wow-delay=".9s">
            <h6 class=" footer-col-title    ">contact information</h6>
            <div class="footer-col-content-wrapper">       
              <div class="contact-info-card"><i class="fas fa-envelope icon"></i><a class="text-lowercase  info" href="mailto:example@support.com">example@support.com</a></div>
              <div class="contact-info-card"><i class="fas fa-globe-africa icon"></i><a class="text-lowercase  info" href="#0">www.yoursite.com</a></div>
              <div class="contact-info-card"><i class="fas fa-map-marker-alt icon"></i><span class="text-lowercase  info">5 Xyz st., Abc, alexandria, egypt.</span></div>
              <div class="contact-info-card"><i class="fas fa-mobile-alt icon"></i><a class="info" href="tel:+20123456789">+20123456789      </a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="copyrights ">
        <div class="container">
          <div class="row">
            <div class="col-12 col-md-6">
              <p class="creadits">&copy; 2025 <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a></p>
            </div>
            <div class="col-12 col-md-6">
              <div class="terms-links"><a href="#0">Terms of Use </a>
                | <a href="#0">Privacy Policy</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- End  page-footer Section-->
    <!-- Start loading-screen Component-->
    <div class="loading-screen" id="loading-screen">
      <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
    </div>
    <!-- End loading-screen Component-->
    <!-- Start back-to-top Component-->
    <div class="back-to-top" id="back-to-top"><i class="fas fa-arrow-up icon"></i></div>
    <!-- End back-to-top Component-->   
        
        <!--     JQuery     -->
        <script src="../js/vendors/jquery-3.4.1.min.js"></script>
        
        <!--     bootstrap     -->
        <script src="../js/vendors/bootstrap.bundle.min.js"></script>
        
        <!--     fancybox     -->
        <script src="../js/vendors/jquery.fancybox.min.js"></script>
        
        <!--     countTo     -->
        <script src="../js/vendors/jquery.countTo.js"></script>
        
        <!--     wow     -->
        <script src="../js/vendors/wow.min.js"></script>
        
        <!--     swiper     -->
        <script src="../js/vendors/swiper.min.js"></script>
        
        <!--     Splitting     -->
        <script src="../js/vendors/splitting.min.js"></script>
        
        <!--     isotope     -->
        <script src="../js/vendors/isotope-min.js"></script>
        
        <!--     main     -->
        <script src="../js/main.js"></script>
  </body>
</html>